<script setup lang="ts">
import { fetchGetCollegeList } from "@/api/public";
import Echarts from "@/components/echartsTemplate/index.vue";
import { onMounted, reactive } from "vue";

const getCollegeList = async () => {
  const res = await fetchGetCollegeList()
  console.log(res.data.data)
  res.data.data.forEach((item) => {
    xdata.push(item.name)
    vaccination.push(item.totalNumber)
    unvaccinated.push(item.joinedNumber)
    unvaccinatedTwo.push(item.presidentNumber)
  })
}

onMounted(() => {
  getCollegeList()
})

const xdata = reactive([])
const vaccination = reactive([])
const unvaccinated = reactive([])
const unvaccinatedTwo = reactive([])
// mock数据
const dataArr = {
  xdata: xdata,
  vaccination: vaccination,
  unvaccinated: unvaccinated,
  unvaccinatedTwo: unvaccinatedTwo,
};

// tooltip
const tooltip = {
  trigger: "axis",
  fontSize: "100%",
  // 此处待优化
  formatter: (params: any[]) => {
    let rander = params
      .map((item: { seriesType: string; seriesName: any; value: string }) =>
        item.seriesType !== "pictorialBar"
          ? `<div>${item.seriesName}: ${item.seriesType !== "line" ? item.value : item.value + "%"
          }</div>`
          : ""
      )
      .join("");
    return `
            <div>${params[0].axisValue}</div>
            ${rander}
        `;
  },
};
const legend = {
  data: ["学院总人数", "已参与社团人数", "学生干部人数"],
  fontSize: 14,
  color: "#555",
  itemWidth: 25,
  itemHeight: 15,
  itemGap: 15,
  top: "5%",
  selectedMode: false,
};
const grid = { top: "18%", left: "8%", right: "5%", bottom: "10%" };
// xAxis
const xAxis = {
  axisTick: { show: true },
  axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
  axisLabel: { fontSize: 12, color: "#555" },
  data: dataArr.xdata,
};

// yAxis
const yAxis = [
  {
    axisTick: { show: false },
    axisLine: { show: false },
    splitLine: { lineStyle: { color: "rgba(0,0,0,0.2)" } },
    axisLabel: { fontSize: 16, color: "#555" },
  },
  {
    show: true,
    splitLine: { show: false },
    axisLine: { show: false },
    axisTick: { show: false },
    axisLabel: {
      fontSize: 16,
      color: "#555",
      formatter: (params: any) => {
        return `${params}%`;
      },
    },
  },
];

// series
const series = [
  {
    z: 1,
    name: "上部1",
    type: "pictorialBar",
    symbolPosition: "end",
    data: dataArr.vaccination,
    symbol: "diamond",
    symbolOffset: ["-50%", "-50%"],
    symbolSize: [29, 19],
    itemStyle: {
      borderColor: "rgba(0,177,216)",
      color: "rgba(0,177,216)",
    },
  },
  {
    z: 1,
    type: "bar",
    name: "学院总人数",
    barWidth: 30,
    barGap: "-50%",
    data: dataArr.vaccination,
    itemStyle: {
      color: {
        type: "linear",
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
          { offset: 0, color: "rgba(0,177,216, .7)" },
          { offset: 0.5, color: "rgba(0,177,216, .7)" },
          { offset: 0.5, color: "rgba(0,177,216, .3)" },
          { offset: 1, color: "rgba(0,177,216, .3)" },
        ],
      },
    },
  },
  {
    z: 2,
    name: "上部1",
    type: "pictorialBar",
    symbolPosition: "end",
    data: dataArr.unvaccinated,
    symbol: "diamond",
    symbolOffset: [0, "-50%"],
    symbolSize: [29, 19],
    itemStyle: {
      borderColor: "rgba(35,193,133)",
      color: "rgba(35,193,133)",
    },
  },
  {
    z: 2,
    type: "bar",
    name: "已参与社团人数",
    barWidth: 30,
    data: dataArr.unvaccinated,
    itemStyle: {
      color: {
        type: "linear",
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
          { offset: 0, color: "rgba(35,193,133, .7)" },
          { offset: 0.5, color: "rgba(35,193,133, .7)" },
          { offset: 0.5, color: "rgba(35,193,133, .3)" },
          { offset: 1, color: "rgba(35,193,133, .3)" },
        ],
      },
    },
  },
  {
    z: 3,
    name: "上部1",
    type: "pictorialBar",
    symbolPosition: "end",
    data: dataArr.unvaccinatedTwo,
    symbol: "diamond",
    symbolOffset: ["50%", "-50%"],
    symbolSize: [29, 19],
    itemStyle: {
      borderColor: "rgb(245,219,1)",
      color: "rgb(245,219,1)",
    },
  },
  {
    z: 3,
    type: "bar",
    name: "学生干部人数",
    barWidth: 30,
    data: dataArr.unvaccinatedTwo,
    itemStyle: {
      color: {
        type: "linear",
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
          { offset: 0, color: "rgba(245,219,1, .7)" },
          { offset: 0.5, color: "rgba(245,219,1, .7)" },
          { offset: 0.5, color: "rgba(245,219,1, .3)" },
          { offset: 1, color: "rgba(245,219,1, .3)" },
        ],
      },
    },
  },
];
let options = {
  tooltip,
  xAxis,
  yAxis,
  series,
  grid,
  legend,
};

const option = reactive(options);
</script>

<template>
  <div class="barChart">
    <Echarts :option="option"></Echarts>
  </div>
</template>

<style scoped lang="scss">
.barChart {
  height: 100%;
}
</style>
